<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生选课</title>
    <style>
        body { background: #f5f5f5; font-family: 'Microsoft YaHei', Arial, sans-serif; margin: 0; }
        .navbar {
            background-color: #363636;
            overflow: hidden;
            padding: 10px 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .navbar a {
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
            transition: background-color 0.3s, color 0.3s;
        }
        .navbar a:hover, .navbar a.active {
            background-color: #555;
            color: white;
        }
        .container {
            width: 90%;
            margin: 50px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 40px;
            text-align: center;
        }
        h2 { margin-bottom: 20px; color: #333; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; color: #333; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        .btn-select { background: #4CAF50; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
        .btn-select:hover { background: #45a049; }
        .search-container { margin-bottom: 20px; text-align: left; }
        .search-container input[type="text"] { padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 200px; }
        .search-container button { background: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-left: 10px; }
        .search-container button:hover { background: #0056b3; }
    </style>
</head>
<body>
<div class="navbar">
    <a href="index.jsp">首页</a>
    <a href="xuesheng_course_selection" class="active">选课</a>
    <a href="xuesheng_course_records">选课记录</a>
    <a href="xuesheng_personal_center">个人中心</a>
    <%-- 其他学生相关导航链接 --%>
    <a href="logout">退出登录</a>
</div>
<div class="container">
    <h2>可选课程</h2>
    <div class="search-container">
        <form action="xuesheng_course_selection" method="get">
            <label for="teacherId">按老师ID搜索:</label>
            <input type="text" id="teacherId" name="teacherId" value="<c:out value="${param.teacherId}"/>" placeholder="输入老师ID">
            <button type="submit">搜索</button>
        </form>
    </div>
    <table>
        <thead>
            <tr>
                <th>课程ID</th>
                <th>课程名称</th>
                <th>课程描述</th>
                <th>授课老师ID</th>
                <th>最大容量</th>
                <th>已选人数</th>
                <th>剩余容量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="course" items="${courses}">
                <tr>
                    <td><c:out value="${course.id}"/></td>
                    <td><c:out value="${course.courseName}"/></td>
                    <td><c:out value="${course.courseDescription}"/></td>
                    <td><c:out value="${course.teacherId}"/></td>
                    <td><c:out value="${course.maxCapacity}"/></td>
                    <td><c:out value="${selectedStudentsCountMap[course.id]}"/></td>
                    <td><c:out value="${remainingCapacityMap[course.id]}"/></td>
                    <td>
                        <c:set var="courseStatus" value="${studentCourseStatusMap[course.id]}"/>
                        <c:choose>
                            <c:when test="${courseStatus eq '已选'}">
                                <form action="xuesheng_course_selection" method="post" style="display: inline;">
                                    <input type="hidden" name="courseId" value="<c:out value="${course.id}"/>">
                                    <input type="hidden" name="action" value="drop">
                                    <button type="submit" class="btn-select" style="background-color: #f44336;">放弃</button>
                                </form>
                                <button type="button" class="btn-select" disabled style="background-color: #cccccc; margin-left: 5px;">已选择</button>
                            </c:when>
                            <c:when test="${courseStatus eq '已退选'}">
                                <form action="xuesheng_course_selection" method="post" style="display: inline;">
                                    <input type="hidden" name="courseId" value="<c:out value="${course.id}"/>">
                                    <input type="hidden" name="action" value="select">
                                    <button type="submit" class="btn-select">选择</button>
                                </form>
                            </c:when>
                            <c:otherwise>
                                <form action="xuesheng_course_selection" method="post" style="display: inline;">
                                    <input type="hidden" name="courseId" value="<c:out value="${course.id}"/>">
                                    <input type="hidden" name="action" value="select">
                                    <button type="submit" class="btn-select">选择</button>
                                </form>
                            </c:otherwise>
                        </c:choose>
                    </td>
                </tr>
            </c:forEach>
            <c:if test="${empty courses}">
                <tr>
                    <td colspan="6">暂无可选课程。</td>
                </tr>
            </c:if>
        </tbody>
    </table>

    <c:if test="${not empty errorMessage}">
        <p style="color: red;"><c:out value="${errorMessage}"/></p>
    </c:if>
    <c:if test="${not empty successMessage}">
        <p style="color: green;"><c:out value="${successMessage}"/></p>
    </c:if>
</div>
</body>
</html> 